@()(implicit request: play.api.mvc.RequestHeader)
@main("Download") {

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			img {
				width: 25px;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Download</h2>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-3" id="myScrollspy">
			<div class="bs-docs-sidebar affix-top" role="complementary">
				<ul class="nav bs-docs-sidenav" id="myNav">
					<li class=""><a href="#1">1. Annotations</a></li>
					<li><a href="#2">2. Expression profiles</a></li>
					<li><a href="#3">3. Program</a></li>
				</ul>
			</div>
		</div>
		<div class="col-xs-9" style="line-height: 2em">

			<div class="row" id="1">
				<div class="col-xs-12">
					<p class="paragraph bold">
						1. Annotations
					</p>
					<ul>
						<li>
							<span>
								Linear splice junctions:
								<a href="@routes.DownloadController.downloadData()?fileName=detail_LS_annotation.txt" style="" ><img src="@routes.Assets.at("images/txt.png")"></a>
							</span>

						</li>
						<li>
							<span>
								Back-splice junctions:
								<a href="@routes.DownloadController.downloadData()?fileName=detail_BS_annotation.txt" style="" ><img src="@routes.Assets.at("images/txt.png")"></a>

							</span>
						</li>
						<li>
							<span>
								Fusion junctions:
								<a href="@routes.DownloadController.downloadData()?fileName=detail_FS_annotation.txt" style="" ><img src="@routes.Assets.at("images/txt.png")"></a>

							</span>
						</li>
						<li>
							<span>
								Alternative splice junctions:
								<a href="@routes.DownloadController.downloadData()?fileName=Alternative_Splice_Junctions.tar.gz" style="" ><img src="@routes.Assets.at("images/txt.png")"></a>

							</span>
						</li>
					</ul>

				</div>
			</div>

			<div class="row" id="2">
				<div class="col-xs-12">
					<p class="paragraph bold">
						2. Expression profiles
					</p>
					<ul>
						<li>
							<span>
								Linear splice junctions:

								<div class="col-sm-12">
									<div style="" class="col-sm-10">
										<table class="display table table-bordered" id="table" data-pagination="true"
										data-toolbar="#toolbar" data-multiple-search="true"
										style="word-wrap: break-word;">
											<thead>

											</thead>
										</table>
									</div>
								</div>

							</span>
						</li>
						<li style="margin-top: 15px">
							<span>
								Back-splice junctions:
								<a href="@routes.DownloadController.downloadData()?fileName=BS_expression.tar.gz" style="" ><img src="@routes.Assets.at("images/txt.png")"></a>


							</span>
						</li>
						<li>
							<span>
								Fusion junctions:
								<a href="@routes.DownloadController.downloadData()?fileName=FS_expression.csv" style="" ><img src="@routes.Assets.at("images/txt.png")"></a>

							</span>
						</li>
					</ul>
				</div>
			</div>

			<div class="row" id="3">
				<div class="col-xs-12">
					<p class="paragraph bold">
						3. Program
					</p>
					<ul>
						<li>
							<span>
								ASJA (a program for Assembling Splice Junctions Analysis):
								<a href="@routes.DownloadController.downloadData()?fileName=ASJA.zip" style=""><img src="@routes.Assets.at("images/folder.png")"></a>
								<a href="https://github.com/HuangLab-Fudan/ASJA" style="" target="_blank"><img src="@routes.Assets.at("images/github.png")"></a>
							</span>
						</li>
					</ul>
				</div>
			</div>

		</div>
	</div>


	<ul>


	</ul>


	<script>
			$(function () {
				Download.init
			})
	</script>


}
